/*
    Buttons
    (Most of the basics are handled by litestrap - this is for custom stuff)
*/
%btn,
%btn--base {
    @include experimental(appearance, none); // override iOS wackyness
    @include single-transition(none);
    outline: none !important;
    background-color: $button-bg;
    border-color: $button-border;
    line-height: 2;
    font-weight: normal;
    font-size: 1em;
    padding-top: 2px;
    padding-bottom: 2px;
    color: $slate;
    &:hover, &:focus {
        text-decoration: none !important; // come on don't break the illusion
        color: $slate;
    }
}
%btn {
    &:active {
        background-color: $button-bg;
        border-color: $button-bg;
    }
}

.btn, .button {
    @extend %btn;

    &.is-disabled, &.is-disabled:hover, &.is-disabled:active, &.is-disabled:focus {
        cursor: default;
        border-color: $button-border-alt;
        background-color: $button-border-alt;
        color: #eee;
    }
    &.is-active {
        border-color: transparent;
        background: $slate-light;
        color: $white;
        font-weight: 300;
    }
}

    // bright button
    %btn--primary {
        background-color: $contrast-blue;
        border-color: $contrast-blue;
        color: $white;

        font-weight: 600;

        &:hover, &:focus {
            color: $white;
            background-color: $blue;
            border-color: $blue;
        }
        &:active {
            background-color: $blue-dark;
            border-color: $blue-dark;
        }
    }

    .btn--primary {
        @extend %btn--primary;
    }

    .btn--primary--alt {
        background-color: $blue;
        border-color: $blue;
        color: $white;

        font-weight: 600;

        &:hover, &:focus, &:active {
            color: $white;
            background-color: $blue-dark;
            border-color: $blue-dark;
        }
    }

    .btn--critical {
        background-color: $red-light;
        border-color: $red-light;
        color: $white;

        font-weight: 600;

        &:hover, &:focus {
            color: $white;
            background-color: $red;
            border-color: $red;
        }
        &:active {
            background-color: $red-dark;
            border-color: $red-dark;
        }
    }

    // gray button
    .btn--secondary {
        border-color: $button-border;
        background-color: $silver;
        color: $slate-light;

        font-weight: 600;

        &:hover, &:focus {
            background-color: $platinum-light;
        }
        &:active {
            background-color: $platinum-dark;
            border-color: $platinum-dark;
        }
    }

    // alternative shade, mostly default look
    .btn--alt {
        border-color: $button-border-alt;
        background-color: $button-bg-alt;
        color: $button-color-alt;

        &:hover, &:focus {
            color: $button-color-alt;
            background-color: darken($button-bg-alt,5%);
        }
        &:active {
            background-color: $button-bg-alt;
            border-color: $button-bg-alt;
        }
    }

    .btn--wire {
        border-radius: $radius;
        background: none;
        background-color: transparent;
        font-weight: normal;
        border: 1px solid $button-border;
        color: $grey-light;

        &:hover, &:focus {
            border-color: $grey-light;
            background-color: $grey-light;
            color: $white;
        }
    }

    .btn--wire--hero {
        border-radius: $radius;
        background: none;
        background-color: transparent;
        border: 2px solid $white;
        color: $white;

        &:hover, &:focus {
            border-color: $white;
            background: none;
            background-color: transparent;
            color: $white;
        }
    }

    .btn--wire--dark {
        border-color: $dark;
        color: $dark;

        &:hover {
            border-color: $dark;
            background-color: $dark;
        }
    }

    %btn--icon {
        @extend %btn--base;
        @include icon();
        @include transition(background-color 0.1s, color 0.1s);
        border-radius: $radius;
        -webkit-tap-highlight-color: rgba(0,0,0,0);

        padding: 0;
        border: none;
        background: none;
        text-align: center;
        text-shadow: none;
        vertical-align: middle;

        position: relative;

        width: 33px;
        height: 33px;
        line-height: 34px;
        text-indent: 1px;

        // all icons are aligned to a pixel grid,
        // and most of those are on a 16px grid.
        // this can be adjusted on a per-use basis.
        font-size: 16px;

        // hover/active effects only for non-touch or js-disabled eevices
        .no-touch &,
        .no-js & {
            &:hover,
            &:focus {
                color: white;
                background-color: $detail-control-hover-bg;
            }
            &:active {
                @include single-transition(none);
                color: white;
                background-color: $detail-control-active-bg;
            }
        }
    }

    .btn--icon,
    .btn--top {
        @extend %btn--icon;
    }

    .btn__icon,
    .btn__icon--sm {
        margin-right: $quarter-unit/2;
        vertical-align: middle;
        margin-top: -$quarter-unit/2;
        max-height: 1em;
        max-width: 1em;
    }
    .btn__icon {
        margin-left: -$quarter-unit;
        font-size: 1.5em;
    }
    .btn__icon--sm {
        font-size: 16px;
        margin-left: -$quarter-unit;
        margin-right: $half-unit;
        position: relative;
        top: -0.05em;
    }

    .btn--inline {
        display: inline;
        line-height: inherit;
        padding-left: 0.75em;
        padding-right: 0.75em;
        top: -1px;
    }

.btn-stack {
    margin-bottom: -$half-unit;
    padding: 0;
    .btn {
        display: block;
        margin-bottom: $half-unit;
    }
}

